<template>
  <div class="view">
    <el-card shadow="hover">
      <template v-slot:header>
        <div class="title-wrapper">{{$t('dashboard.ProductTypeSalesAndInventory')}}</div>
      </template>
      <template>
        <div class="chart-wrapper">
          <div
            class="com-chart"
            ref="stock_ref"
            :style="{width: '100%' , height:'100%'}"
          ></div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import homeview from "@/api/homeview";
export default {
  data() {
    return {
      chartInstance: null,
      allData: {}, //从服务器获取的全部数据
      tempData: [], //处理数据变量
      currentIndex: 0, // 当前显示的数据
      timerId: null, // 定时器的标识
    };
  },

  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    clearInterval(this.timerId);
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.stock_ref);
      const initOption = {
        tooltip: {
          trigger: "item",
          formatter: "{c}个:({d}%)",
        },
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    getData() {
      homeview
        .getGoodsStock()
        .then((res) => {
          this.allData = res.data.list;
          // console.log(this.allData);
          this.updateChart();
          this.startInterval();
        })
        .catch((error) => {
          console.log("error");
        });
    },
    updateChart() {
      const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      const colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];
      // 处理图表需要的数据
      const start = this.currentIndex * 5;
      const end = (this.currentIndex + 1) * 5;

      //数据处理
      const size = this.allData.type.length;
      for (let i = 0; i < size; i++) {
        let temp = {};
        temp.type = this.allData.type[i];
        temp.salenumber = this.allData.salenumber[i];
        temp.stock = this.allData.stock[i];
        this.tempData.push(temp);
      }
      const showData = this.tempData.slice(start, end);
      const seriesArr = showData.map((item, index) => {
        return {
          type: "pie",
          radius: ["30%", "35%"],
          center: centerArr[index],
          hoverAnimation: false, // 关闭鼠标移入到饼图时的动画效果
          labelLine: {
            show: false, // 隐藏指示线
          },
          label: {
            position: "center",
            color: colorArr[index][0],
            fontSize: 18,
          },
          data: [
            {
              name: item.type + "\n" + "销量:" +item.salenumber + "\n" + "库存:" +item.stock,
              value: item.salenumber,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArr[index][0],
                  },
                  {
                    offset: 1,
                    color: colorArr[index][1],
                  },
                ]),
              },
            },
            {
              value: item.stock,
              itemStyle: {
                color: "#D3D3D3",
              },
            },
          ],
        };
      });
      const dataOption = {
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.stock_ref.offsetWidth / 100) * 3.6;
      const innerRadius = titleFontSize * 2.8;
      const outterRadius = innerRadius * 1.125;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > 1) {
          this.currentIndex = 0;
        }
        this.updateChart(); // 在更改完currentIndex之后 , 需要更新界面
      }, 5000);
    },
  },
};
</script>

<style lang='scss' scoped>
.view {
  flex: 1;
  width: 50%;
  box-sizing: border-box;
  &:first-child {
    padding: 0 10px 0 0;
  }
  &:last-child {
    padding: 0 0 0 10px;
  }
  .title-wrapper {
    display: flex;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    font-weight: 500;
    padding: 0 0 0 20px;
  }
  .chart-wrapper {
    width: 100%;
    height: 400px;
    margin-top: -15%;
  }
}
</style>
